<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
    append-to-body
  >
    <div>
      <div>
        <span style="font-weight: 500;font-size: 16px;color: #101010;">角度（外角）：</span>
        <el-input v-model="input" placeholder="请输入内容" style="width: 30%;margin-right: 20px;"></el-input>
        <el-button size="small" type="primary" @click="newlyAdded">新增</el-button>
        <el-button size="small" @click="deleteVal">删除</el-button>
      </div>

      <el-table class="tableSty" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="angle" label="角度" align="center">
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: "",
      input: '',

      tableData: [
        {
          angle: "1",
        },
        {
          angle: "2",
        },
        {
          angle: "3",
        },
      ],
      multipleSelection: []
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    open() {
      this.dialogVisible = true;
      this.title = "弯曲调整值角度设置";
    },
    newlyAdded() {
      console.log("新增");
      this.tableData.push({ angle: this.input })
      this.input = ''
    },
    deleteVal() {
      this.multipleSelection.forEach(items => {
        this.tableData = this.tableData.filter((item) => { return item.angle !== items.angle })
      })
      
      console.log(this.multipleSelection, "删除");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitForm() {
      console.log(this.tableData)
    },
    handleClose(done) {
      this.$modal
        .confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.tableSty {
  width: 100%;
  margin-top: 20px;
}
</style>
